<template>
	<!-- 商品展示页面 -->
	<view>
		<view class="dinbu-class">
			<!-- 搜索框-->
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" v-model="params.spName" placeholder="商品名" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-gradual-blue shadow-blur round" @click="sercher">查询</button>
				</view>
			</view>
			<!-- 导航栏 -->
			<view class="daohanglan-class">
				<ul>
					<li @click="xzIndexs(index)" v-for="(item,index) in daohaoName"
						:class="`${xzIndex==index?'xz-class':''}`">
						{{item.name}}
						<span class="sanjues" v-if="item.name=='销量'">
							<span :class="`${xlAscending==false?'morxz':'top-san-class'}`"></span>
							<span
								:class="`${xlAscending&xlAscending!=null?'xz-bottom-san-class':'bottom-san-class'}`"></span>
						</span>
						<span class="sanjues" v-if="item.name=='价格'">
							<span :class="`${!priceAscending&priceAscending!=null?'morxz':'top-san-class'}`"></span>
							<span
								:class="`${priceAscending&priceAscending!=null?'xz-bottom-san-class':'bottom-san-class'}`"></span>
						</span>
					</li>
				</ul>

			</view>

		</view>

		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''">
			<view class="cu-dialog basis-lg">
				<view class="cu-list menu text-left">
					<view class="cu-item">
						<view class="content">
							<text class="sx-center">筛选</text>
						</view>
					</view>

					<view class="cu-item">
						<view class="price-class">
							价格
						</view>
					</view>
					<view class="cu-item">
						<input type="number" v-model="startPrice" placeholder="最低价格" class="input-class" />
						<text class="hengx-prcie"></text>
						<input v-model="endPrice" type="number" placeholder="最高价格" class="input-class tight" />
					</view>
					<view class="cu-item">
						操作
						<view class="claer-class" @click="deletePirce">重置</view>
					</view>
					<view class="dbu-buton-class">
						<button class="cu-btn bg-gradual-orange" style="width: 40%;" @click="hideModal">取消</button>
						<button class="cu-btn bg-gradual-blue shadow-blur"
							style="width: 40%;position: absolute;right: 0;" @click="sercher()">查询</button>
					</view>
				</view>
			</view>
		</view>


		<!-- 商品-->
		<!-- 商品推荐 -->
		<view class="shops-body">
			<view class="shops-xq" v-for="(item,index) in shops" @click="tzxq(item.spId)">
				<!-- 商品图片-->
				<img class="shop-img" :src="item.spImg">
				<!-- 商品名-->
				<text class="shop-name-nc">
					<view class="shop-name-nc-wz">{{item.spName}}</view>
				</text>
				<!-- 商品价格-->
				<view class="price-shop">
					<span>￥{{item.spSellingPrice}}</span>
					<!-- 商品销量 -->
					<text class="xiaoliang-class">销量:{{item.spSales}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				startPrice: null,
				endPrice: null,
				modalName: null,
				url: this.$url + "/frontend",
				shops: [],
				daohaoName: [{
						name: "默认排序",
						is: false
					},
					{
						name: "销量",
						is: true
					},
					{
						name: "价格",
						is: true
					},
					{
						name: "筛选",
						is: false
					},
				],
				xlAscending: null,
				priceAscending: null,
				xzIndex: 0,
				params: {
					currPage: 1,
					spName: this.$route.query.spName,
					totalPage: 0
				}
			}
		},
		created() {
			this.list()

		},

		// 上拉加载
		onReachBottom() {
			let _self = this
			uni.showNavigationBarLoading()
			//TOOD 加载 下一一页的数据
			if (this.params.totalPage > this.params.currPage) {
				this.params.currPage = this.params.currPage + 1
				this.list()
			}
			uni.hideNavigationBarLoading()

		},
		methods: {
			tzxq(spId){
				uni.navigateTo({
					url: "../index/index?spId=" + spId
				})   
			},
			deletePirce() {
				this.startPrice = null
				this.endPrice = null
				this.sercher()
			},
			hideModal(e) {
				this.modalName = null
				this.xzIndex = 0
			},
			showModal(data) {
				this.modalName = data
			},
			sercher() {
				this.hideModal()
				this.shops = []
				this.params.currPage = 1
				this.xlAscending = null
				this.priceAscending = null
				this.list()
			},
			list() {
				var params = {
					"page": this.params.currPage,
					"spName": this.params.spName,
					"xlAscending": this.xlAscending,
					"priceAscending": this.priceAscending,
					"startPrice": this.startPrice,
					"endPrice": this.endPrice,
				}
				uni.request({
					url: `${this.url}/shop/list`,
					method: "GET",
					data: params,
					success: ({
						data
					}) => {
						var list = data.data.page.list
						for (var i = 0; i < list.length; i++) {
							this.shops.push(list[i])
						}
						this.params.currPage = data.data.page.currPage
						this.params.totalPage = data.data.page.totalPage
					}
				})
			},

			xzIndexs(index) {
				this.xzIndex = index
				if (this.daohaoName.length - 1 == index) {
					// @tap="showModal" data-target="DrawerModalR"
					this.showModal("DrawerModalR")
					// console.log("****")
					return
				}
				if (this.xlAscending == null || this.priceAscending == null) {
					this.shops = []
					this.params.currPage = 1
				}
				if (this.daohaoName[index].name == "销量") {
					this.xlAscending = this.xlAscending ? false : true
					this.list()
					this.priceAscending = null
				} else if (this.daohaoName[index].name == "价格") {
					this.priceAscending = this.priceAscending ? false : true
					this.list()
					this.xlAscending = null
				} else {
					this.xlAscending = null
					this.priceAscending = null
					this.list()
				}
			}
		}
	}
</script>

<style scoped>
	.claer-class {
		position: absolute;
		right: 10%;
		font-size: 10px;
		width: 40px;
		height: 40rpx;
		text-align: center;
		border-bottom: 1px solid #afafaf;
	}

	.tight {
		position: absolute;
		right: 0;
	}

	.hengx-prcie {
		position: relative;
		width: 50rpx;
		height: 2rpx;
		background-color: #060606;
	}

	.input-class {
		position: relative;
		font-size: 10px;
		width: 30%;
	}

	.dbu-buton-class {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.dinbu-class {
		position: relative;
		width: 100%;
	}

	.xiaoliang-class {
		right: 5%;
		position: absolute;
		color: #585858;
		font-size: 10px;
	}

	.dbu {
		position: relative;
		width: 100px;
		height: 200px;
	}

	.shops-body {
		position: relative;
		float: left;
		width: 100%;
		top: 70rpx;
	}

	.price-shop {
		position: relative;
		margin-left: 3%;
		top: 1%;
		color: red;
		font-size: 15px;
	}

	.shop-name-nc-wz {
		width: 97%;
		margin-left: 3%;
		font-size: 15px;
		;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.shop-name-nc {
		position: relative;
	}

	.shop-img {
		position: relative;
		width: 100%;
		height: 170px;
	}

	.shops-xq {
		margin-left: 5%;
		margin-top: 20px;
		position: relative;
		width: 43%;
		float: left;
		background-color: #ffffff;
		height: 220px;
		border-radius: 10px;
	}

	.morxz {
		border-top: 10rpx solid #00aaff;
		position: absolute;
		top: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
	}

	.top-san-class {
		position: absolute;
		top: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #999999;

	}

	.xz-bottom-san-class {
		position: absolute;
		bottom: 10rpx;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 10rpx solid #00aaff;
	}

	.bottom-san-class {
		position: absolute;
		bottom: 10rpx;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 10rpx solid #999999;
	}

	.sanjues {
		position: absolute;
		width: 20px;
		top: 55%;
		margin-left: 5%;
	}

	.xz-class {
		color: #007AFF;
		border-bottom: 1px solid #007AFF;
	}

	.daohanglan-class ul li {
		position: relative;
		float: left;
		margin-left: 12%;
	}

	.daohanglan-class ul {
		list-style: none;
		width: 100%;
		right: 0;
		position: absolute;
		line-height: 80rpx;
	}

	.daohanglan-class {
		position: absolute;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
	}
</style>
